<template>
  <body id="poster">
  <div class="container">

    <el-form :model="registerForm" :rules="rules" ref="register" class="login-container" label-position="left" lable-width="0px">
      <h3 style="padding-right:10px;height: 10px" class="login-title" >
        注册Flora账号
        <el-button type="text" class="register-btn" style="padding-right: 10px" @click="backToLogin">已有账号，点击登录</el-button>
      </h3>
<!--      <el-form-item label-position="left">-->
<!--        <div style="height: 24px;">-->
<!--          <el-radio-group  v-model="radio" size="small"style="width:100%;padding-bottom: 200px;">-->
<!--            <el-radio-button label="1" style="">我是花民</el-radio-button>-->
<!--            <el-radio-button label="2">我是商家</el-radio-button>-->
<!--          </el-radio-group>-->
<!--        </div></el-form-item>-->
      <el-form-item label="" label-position="right">
        <el-input type="text" autocomplete="off"v-model="registerForm.registerName" placeholder="账号"></el-input>
      </el-form-item>
      <el-form-item label="">
        <el-input type="text" autocomplete="off" v-model="registerForm.nickName" placeholder="昵称"></el-input>
      </el-form-item>
      <el-form-item label="">
        <el-input type="password" autocomplete="off" v-model="registerForm.password" placeholder="密码"></el-input>
      </el-form-item>
      <el-form-item label="" prop="checkPass">
        <el-input type="password" placeholder="确认密码" v-model="registerForm.checkPass" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" style="width: 100%;background-color: #505458;border: none" @click="registerUser">注册</el-button>
      </el-form-item>
    </el-form></div>
  </body>
</template>

<script>
export default {
  name: "Register",
  data() {

    const validateName = (rule, value, callback) => {
      var reg = /^[0-9a-zA-Z]{6,16}$/; // 账号长度必须在6-16之间，且不能包含非法字符*&#@
      if (value === '' || value === undefined) {
        callback(new Error('请输入用户名'))
      } else if (value.indexOf('*') > 0 || value.indexOf('#') > 0 || value.indexOf('@') > 0 || value.indexOf('&') > 0) {
        callback(new Error('用户名不能含有非法字符*#@&'))
      } else {
        callback()
      }
    };
    const validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'));
      } else {
        if (this.registerForm.checkPass !== '') {
          this.$refs.register.validateField('checkPass');
        }
        callback();
      }
    };
    const validatePass2 = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'));
      } else if (value !== this.registerForm.password) {
        callback(new Error('两次输入密码不一致!'));
      } else {
        callback();
      }
    };
    return {
      radio:'1',
      registerForm:{
        registerName:'',
        nickName:'',
        password:'',
        checkPass:''
      },
      rules: {
        registerName: [{required:true,validator:validateName,trigger:'blur'}],
        password: [
          { required:true,validator: validatePass, trigger: 'blur' }
        ],
        checkPass: [
          { required:true,validator: validatePass2, trigger: 'blur' }
        ]
      }
    }

  },
  methods:{
    registerUser(){
      this.$refs.register.validate((valid) => {
        if (valid) {
          alert('submit!');
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    backToLogin(){
      this.$router.push({path:'/Login'})
    }
  }
}
</script>

<style scoped>

</style>